.m-drawer {
  visibility: hidden;

  &.m-drawer--show {
    visibility: visible;

    .m-drawer__mask {
      display: block;
      opacity: 1;
    }

    .m-drawer__content {
      opacity: 1;
      transform: translate3d(0, 0, 0) !important;
    }
  }

  .m-drawer__mask {
    opacity: 0;
    z-index: 9;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-mask, rgba(0, 0, 0, 0.55));
    transition: opacity .25s ease-in-out, visibility .25s ease-in-out;
  }

  .m-drawer__content {
    opacity: 0;
    z-index: 10;
    position: fixed;
    transform-origin: center;
    background-color: #fff;
    transition: transform .25s ease-in-out, opacity .25s ease-in-out, visibility .25s ease-in-out;
  }

  &.m-drawer--left {
    .m-drawer__content {
      top: 0;
      left: 0;
      transform: translate3d(-100%, 0, 0);
    }
  }

  &.m-drawer--right {
    .m-drawer__content {
      right: 0;
      top: 0;
      transform: translate3d(100%, 0, 0);
    }
  }

  &.m-drawer--top {
    .m-drawer__content {
      left: 0;
      top: 0;
      width: 100%;
      transform: translate3d(0, -100%, 0);
    }
  }

  &.m-drawer--bottom {
    .m-drawer__content {
      left: 0;
      bottom: 0;
      width: 100%;
      transform: translate3d(0, 100%, 0);
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}